<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/statics/layui/css/layui.css" media="all">
  <style>
      .layui-tab-brief>.layui-tab-title .layui-this{
        color: #3b85c8;
      }
      .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
        border-bottom: 2px solid #3b85c8;
      }
      .layui-laypage .layui-laypage-curr .layui-laypage-em{
        background-color: #3b85c8;
      }
    </style>
</head>

<body>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>资产流水</legend>
  </fieldset>
  <div class="layui-form">
    币种：
    <div class="layui-inline" style="width: 150px;">
      <select id="typeId" name="typeId"></select>
    </div>
    <button class="layui-btn layui-btn-normal" id="btnSearch">搜索</button>
  </div>
  <table class="layui-hide" id="dg"></table>

  <script src="/statics/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="../js/config.js"></script>
  <script type="text/javascript" src="../js/utils.js"></script>
  <script>

    var MyMoneyLog = {
      "init":function(){
        $("#typeId").append("<option value=''>——全部——</option>");
        DataUtils.getMoneyTypeList(function (data) {
          if (data && data.length > 0) {
            $.each(data, function (i, item) {
              $("#typeId").append("<option value='" + item.typeId + "'>" + item.typeName + "</option>");
            });
          }
          MyMoneyLog.initForm();
        });
      },
      "initForm":function(){
        layui.use(['table'], function () {
          var table = layui.table;

          table.render({
            elem: '#dg',
            url: Config.WEB_SERVER_API + Config.URI.USER_MONEY_LOG_LIST,
            request: {
              pageName: 'offset' //页码的参数名称，默认：page
              , limitName: 'limit' //每页数据量的参数名，默认：limit
            },
            cellMinWidth: 60, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
              { field: 'id', title: 'ID', hide: true }
              , { field: 'typeName', title: '币种', width: 130 }
              , { field: 'logTypeName', title: '类型', width: 150 }
              // , { field: 'beforeMoney', title: '交易前', width: 120 }
              , { field: 'money', title: '数量', width: 120, templet: MyMoneyLog.formatMoney}
              , { field: 'afterMoney', title: '余额', width: 120 }
              , { field: 'createTime', title: '交易时间', templet: function (d) { return FormatUtils.parseTimestampToDateTime(d.createTime); } }
            ]]
            , page: true, loading: true,
            response: {
              statusCode: "200" //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
              return {
                "code": parseInt(res.resultCode), //解析接口状态
                "msg": res.resultMsg, //解析提示文本
                "count": res.total, //解析数据长度
                "data": res.rows //解析数据列表
              };
            }
          });

          var loadData = function () {
            //这里以搜索为例
            table.reload("dg", {
              where: { //设定异步数据接口的额外参数，任意设
                typeId: $("#typeId").val()
              }
              , page: {
                curr: 1 //重新从第 1 页开始
              }
            });
          }

          $("#btnSearch").on('click', function () {
            loadData();
          });
          
        });
      },
      "formatMoney":function(d){
        if(d.money>0){
          return '<span style="color:red;">+'+d.money+'</span>';
        }else{
          return '<span style="color:green;">'+d.money+'</span>';
        }
      }
    };
    
    $(function(){
      MyMoneyLog.init();
    });
  </script>

</body>

</html>